<template>
	<div class="consult">
		<h2>就诊</h2>
		<div class="date-picker">
			<el-button class="prev" @click="prevDay"><span><i class="el-icon-arrow-left"></i></span></el-button>
			<el-date-picker v-model="date" type="date" placeholder="选择日期"></el-date-picker>
			<el-button class="next" @click="nextDay"><span><i class="el-icon-arrow-right"></i></span></el-button>
		</div>
		<el-tabs v-model="activeName">
			<el-tab-pane label="候诊中" name="waitConsult">
				<div class="waiting-patients">
					<div class="patient-item" v-for="patient in patientsList">
						<img src="../assets/img/portraint.jpg" alt="">
						<div class="patient-msg">
							<p>{{patient.name}}</p>
							<p class="patient-basic">{{patient.info}}</p>
							<p class="checkin-time">登记时间 {{patient.checkinTime}}</p>
						</div>
						<div class="mask hide">候诊中</div>
					</div>
				</div>
				<el-pagination background layout="prev, pager, next" :total="10">
				</el-pagination>
			</el-tab-pane>
			<el-tab-pane label="治疗中" name="consulting">
			</el-tab-pane>
			<el-tab-pane label="已完成" name="completed">
			</el-tab-pane>
		</el-tabs>
	</div>
</template>
<style scoped lang="less">
	/deep/.date-picker {
		position: absolute;
		right: 40px;
	}

	.waiting-patients {
		padding: 40px 40px 0;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
	.hide{
		display:none;
	}

	.patient-item {
		position: relative;
		display: flex;
		height: 121px;
		width: 24%;
		margin-right: 1%;
		margin-bottom: 24px;
		border: 1px solid #e3e3e3;
		cursor: pointer;
		padding: 27px 28px;

		img {
			width: 46px;
			height: 46px;
			border-radius: 50%;
			margin-right: 17px;
			border: 1px solid #e0e0e0;
		}

		.patient-msg {
			font-size: 18px;
		}

		.patient-basic {
			margin: 8px 0;
			font-size: 14px;
		}

		.checkin-time {
			color: #868686;
			font-size: 12px;
		}

		.mask {
			position: absolute;
			right: 0;
			bottom: 0;
			color: #fff;
			line-height: 121px;
			text-align: center;
			opacity: .8;			
			top: 0;
			left: 0;
			background-color: #000;
		}
	}
	
	/deep/.el-pagination{
		padding-left:40px;
	}
</style>
<script>
	export default {
		name: "Consult",
		data() {
			return {
				activeName: 'waitConsult',
				date: '',
				patientsList: [{
					name: "王大锤",
					info: "男, 29岁, 149939939",
					checkinTime: "2019-9-13"
				}],
			}
		},
		methods: {
			prevDay() {
				if (this.date) {
					this.date = new Date(this.date.getTime() - 3600 * 1000 * 24);
				}
			},
			nextDay() {
				if (this.date) {
					this.date = new Date(this.date.getTime() + 3600 * 1000 * 24);
				}
			}
		}
	}
</script>
